<template>
	<view>
		<view class="userbox">
			<view class="userlist flex ac jb">
				<view class="usertext">头像</view>
				<view class="userzi flex ac" @click="changeavatar">
					<image mode="aspectFill" style="width: 90rpx;height: 90rpx;border-radius: 50%;margin-right: 10rpx;"
						:src="user.picture">
					</image>
					<image style="width: 30rpx;height: 30rpx;" src="/static/icon/right.png"></image>
				</view>
			</view>
			<view class="userlist flex ac jb">
				<view class="usertext">昵称</view>
				<view class="userzi flex ac" @click="changename">
					<view style="margin-right: 15rpx;">{{user.name}}</view>
					<image style="width: 30rpx;height: 30rpx;" src="/static/icon/right.png"></image>
				</view>
			</view>
			<view class="userlist flex ac jb">
				<view class="usertext">ID</view>
				<view class="userzi">{{user.open_id}}</view>
			</view>
			<view class="userlist flex ac jb">
				<view class="usertext">绑定手机号</view>
				<view class="userzi flex ac" @click="phonea">
					<view v-if="user.phone==null" style="margin-right: 15rpx;">未绑定</view>
					<view v-else style="margin-right: 15rpx;">{{user.phone}}</view>
					<image style="width: 30rpx;height: 30rpx;" src="/static/icon/right.png"></image>
				</view>
			</view>
		</view>

		<!-- 头像弹窗 -->
		<view class='shadett' v-if="toutyp==true"></view>
		<view class="touxiangbox" v-if="toutyp==true" @tap.stop="soutypst">
			<view class="touxiangbox-img" @tap.stop="toutyp==true">
				<image :src="user.picture" mode="aspectFill"></image>
			</view>
			<view class="genggai" @tap.stop="ChooseImage">更改头像</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	let app = getApp();
	export default {
		data() {
			return {
				toutyp: false,
				user: [],
			}
		},

		onLoad() {
			this.userinfodata() //用户详情
		},

		onShow(e) {
			var that = this
			if (uni.getStorageSync("update_quedindel")) {
				that.userinfodata()
				uni.removeStorageSync('update_quedindel')
			}
		},

		methods: {
			changeavatar(e) {
				this.toutyp = true
			},

			soutypst(e) {
				this.toutyp = false
			},

			changename(e) {
				uni.navigateTo({
					url: '/pages/changename/changename?name=' + this.user.name
				})
			},

			//用户详情
			async userinfodata(e) {

				let apply = await request(`${getApp().globalData.http}user/get_user_info`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					token: getApp().globalData.token
				})
				if (apply.data.code == 0) {
					this.user = apply.data.data
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}

			},

			//更换头像
			ChooseImage(e) {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: "上传头像中...",
							mask: true
						})
						uni.uploadFile({
							url: `${getApp().globalData.http}upload_picture`,
							filePath: res.tempFilePaths[0],
							name: "file",
							formData: {
								token: app.globalData.token,
							},
							success: (res) => {
								uni.hideLoading()
								var messaget = JSON.parse(res.data)
								if (messaget.code == 0) {

									uni.request({
										url: `${getApp().globalData.http}user/user_update`,
										method: 'POST',
										header: {
											"Content-Type": "application/x-www-form-urlencoded"
										},
										data: {
											token: app.globalData.token,
											picture: messaget.url
										},
										success: (resa) => {
											if (resa.data.code == 0) {
												uni.showToast({
													title: resa.data.message,
												})
												that.toutyp = false
												that.userinfodata()
											} else {
												uni.showToast({
													title: resa.data.message,
													icon: "none",
												})
											}
										},
									})
								} else {
									uni.showToast({
										title: messaget.message,
										icon: "none",
									})
								}
							},
							fail: (res) => {
								uni.hideLoading()
							}
						})
					}
				});
			},

			phonea(e) {
				if (this.user.phone == '') {
					this.user.phone = ''
				}
				if (this.user.phone == null) {
					this.user.phone = ''
				}
				uni.navigateTo({
					url: '/pages/phonea/phonea?phonevalue=' + this.user.phone
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding: 20rpx;
		background-color: #F2F1F5;
	}

	.userbox {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
	}

	.userlist {
		height: 120rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.userlist:last-child {
		border-bottom: none;
	}

	.usertext {
		font-size: 29rpx;
		font-weight: 600;
		color: #2E303A;
	}

	.userzi {
		font-size: 28rpx;
		color: #777982;
		display: flex;
		align-items: center;
	}

	// 头像弹窗
	.shadett {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.93;
	}

	.touxiangbox {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		padding: 10rpx 20rpx;
		border-radius: 5px;
	}

	.touxiangbox-img {
		width: 500rpx;
		height: 500rpx;
		border: 2px solid #6167E6;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 38%;
	}

	.touxiangbox-img image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.genggai {
		width: 390rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background: linear-gradient(-45deg, #6f5ce3, #8575ef);
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 0 auto;
		border-radius: 50rpx;
		margin-top: 60rpx;
	}
</style>